<script setup>
import { setTitle } from '@/utils/setTitle'
import { useRoute } from 'vue-router/composables'
import { getDisposeOrderList } from '@/apis/order.js'
import NoData from '@/components/NoData.vue'
import { getStartEndTime } from '@/utils/date.js'
import OrderItem from '@/views/workOrder/components/OrderItem.vue'
import { Toast } from 'vant'

// 路由
const route = useRoute()
const queryObject = ref(route.query)

const state = reactive({
  selectOrderType: [], // 舆情类型选择列表
  selectOrderLevel: [], // 舆情级别选择列表
  selectOrderTimeout: [], // 舆情超时选择列表
  selectOrderStatus: [], // 处理状态选择列表
  selectOrderArea: [], // 区域选择列表
  officeList: [], // 选择的所属处室
  directUnitList: [], // 选择的直属单位
  timeDefaultData: [
    new Date(getStartEndTime(-30, 0).startTime),
    new Date(getStartEndTime(-30, 0).endTime)
  ],
  tableData: [],
  loading: false,
  refreshLoading: false,
  Sloading: false,
  finished: false,
  queryField: {
    keyword: null,
    statusList: null, // 处置状态 "FINISHED"已完成,
    infoTypeList: null, // 工单类型
    infoLevelList: null, // 舆情级别
    areaCodeList: null, // 所属州市 州市代码
    officeIdList: null, // 所属处室 id
    directUnitIdList: [], // 直属单位 id
    superviseStatusList: null, // 督办反馈状态 0未督办, 1已督办, 2未反馈, 3已反馈
    timeoutStatusList: null, // 办理状态 0正常, 1即将超时, 2已超时
    createTimeStart: '', // 开始时间 2024-10-09 00:00:00
    createTimeEnd: '', // 结束时间 2024-11-08 23:59:59
    page: {
      current: 1,
      size: 10
    }
  }
})

// 初始化数据-下拉刷新、搜索、
const initData = async () => {
  state.queryField.page.current = 1
  state.finished = false
  await getDisposeOrder('refresh')
}

// 获取接口数据
const getDisposeOrder = async (type) => {
  if (state.Sloading) return
  state.Sloading = true
  await getDisposeOrderList(state.queryField)
    .then((res) => {
      if (res.errorcode === 0) {
        const temp = res.data.records.map((item) => {
          return item
        })
        if (type === 'refresh') {
          state.tableData = []
          state.tableData = temp || []
        } else {
          state.tableData.push(...temp)
        }
        state.queryField.page.current++
        const pageNum = parseInt(res.data.pages)
        if (state.queryField.page.current > pageNum) {
          state.finished = true
        }
      } else {
        Toast.fail(res.msg)
        state.finished = true
      }
    })
    .catch((error) => {
      console.error('请求失败:', error)
      state.finished = true
    })
  state.loading = false
  state.Sloading = false
  state.refreshLoading = false
}

// 获取到url参数，进行赋值查询
const queryObjectFun = () => {
  const fields = [
    'nodeStatus',
    'superviseStatusList',
    'statusList',
    'infoLevelList',
    'timeoutStatusList'
  ]
  try {
    fields.forEach((field) => {
      if (
        queryObject.value[field] !== null &&
        queryObject.value[field] !== undefined
      ) {
        if (field === 'nodeStatus') {
          state.queryField[field] = queryObject.value[field]
        } else {
          state.queryField[field] = [queryObject.value[field]]
        }
      }
    })
  } catch (error) {
    console.error('Error in queryObjectFun:', error)
  }
}

onMounted(async () => {
  if (queryObject.value.title) {
    setTitle(queryObject.value.title)
  }
  queryObjectFun()
  await initData()
})
</script>

<template>
  <section class="h-full w-full p-0 bg-#F8F9FC overflow-x-hidden">
    <NoData :white="false" v-if="state.tableData.length === 0" />
    <van-pull-refresh v-model="state.refreshLoading" @refresh="initData">
      <van-list
        v-model="state.loading"
        :finished="state.finished"
        :finished-text="state.tableData.length ? '没有更多了' : ''"
        @load="getDisposeOrder"
        class="px-12px"
      >
        <OrderItem
          :key="item.id"
          v-for="item in state.tableData"
          :item="item"
        />
      </van-list>
    </van-pull-refresh>
  </section>
</template>

<style scoped lang="less"></style>
